<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <canvas id="canvas" width="800" height="800"></canvas>
    <script>
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d'); // 获取到 Canvas 对象
      ctx.fillStyle = 'red'; // 修改填充色为红色
      ctx.fillRect(0, 0, 50, 50); // 绘制矩形

      ctx.beginPath();
      ctx.lineWidth = 1; // 线条宽度
      ctx.strokeStyle = 'blue'; // 线条填充色
      ctx.moveTo(100, 100); // 起点坐标
      ctx.lineTo(250, 75); // 中间点坐标
      ctx.lineTo(300, 100); // 终点坐标
      ctx.stroke(); // 绘制线段

      ctx.beginPath();
      ctx.lineWidth = 2;
      ctx.strokeStyle = 'green';
      ctx.fillStyle = 'red';
      ctx.arc(200, 200, 50, 0, 2 * Math.PI); // 绘制圆形
      ctx.stroke();
      ctx.fill();

      ctx.beginPath();
      ctx.lineWidth = 1; // 线条宽度
      ctx.strokeStyle = 'red'; // 线条填充色
      ctx.moveTo(300, 300); // 起点坐标
      ctx.lineTo(301, 301); // 中间点坐标
      ctx.stroke(); // 绘制线段
    </script>
  </body>
</html>